import { useState, useEffect, useMemo } from 'react'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import { sleep } from 'antd-mobile/es/utils/sleep'

import { Del ,ArrowLeft} from '@nutui/icons-react'
export default function Search() {
    const [ii, setii] = useState(false)
    const navigate = useNavigate()
    const [value, setValue] = useState('')
    const list = JSON.parse(localStorage.getItem('array')) || []
    const [array, setarray] = useState([])
    const [flag, setflag] = useState('')
    const [flag1, setflag1] = useState('')
    //获取商品
    const search = async () => {
        const list1 = [...list]
        list1.push(value)
        localStorage.setItem('array', JSON.stringify(list1))
        setValue('')
        let result = await axios.get(`http://127.0.0.1:3000/good/?name=${value}`)
        if (result.data.code == 200) {
            setarray(result.data.data)
        }
    }

    const newlist = useMemo(() => {
        if (flag == '') {
            return array
        } else if (flag == 'asc') {
            return array.sort((a, b) => a.sale - b.sale)
        } else if (flag == 'desc') {
            return array.sort((a, b) => b.sale - a.sale)
        }
    }, [flag, array])

    const newList1 = useMemo(() => {
        if (flag1 == '') {
            return newlist
        } else if (flag1 == 'asc') {
            return newlist.sort((a, b) => a.price - b.price)
        } else if (flag1 == 'desc') {
            return newlist.sort((a, b) => b.price - a.price)
        }
    }, [flag1, newlist])

    const back = async () => {
        setii(true)
        await sleep(100)
        navigate('/home')
    }
    useEffect(() => {

    }, [value])
    return (
        <div className={ii ? 'animate__animated animate__fadeOutRight' : ''}>
            <div style={{
                display: "flex", justifyContent: 'space-around', alignItems: 'center',
            }}>
                <p onClick={back}><ArrowLeft /></p>
                <input type="text" value={value} placeholder='请输入搜索内容' onChange={(event) => {
                    setValue(event.target.value)
                }} style={{ width: '180px' ,borderRadius:'15px',padding:'2px 20px',boxSizing:'border-box'}} />
                <button style={{
                    border: 'none', color: "red",
                    fontSize: "12px",
                    padding:'5px 15px',
                    boxSizing:'border-box',
                    borderRadius:'50px',
                    background:'rgba(255,0,0,0.2)',
                }} onClick={() => {
                    search()
                }}>搜索</button>
            </div>
            <div style={{marginTop:'5px',padding:'5px',boxSizing:'border-box'}}>
                <div style={{ display: "flex", justifyContent: 'space-between' }}>
                    <h3>搜索历史</h3>
                    <Del onClick={() => {
                        localStorage.clear()
                    }} />
                </div>
                <ul style={{ display: 'flex',marginTop:'10px',marginBottom:'10px' ,justifyContent:'space-evenly'}}>
                    {list.map(res => {
                        return <li style={{background:'#f1f1f1',padding:'2px 20px',boxSizing:'border-box',marginLeft:'20px;'}}>{res.split(',')}</li>
                    })}
                </ul>
            </div>
            <div  style={{marginTop:'5px',padding:'5px',boxSizing:'border-box'}}>
                <h3>热门搜索</h3>
            </div>
            <ul style={{
                marginTop: "20px", display: 'flex',
                justifyContent: 'space-around',
                marginBottom:'15px'
            }}>
                <li>综合推荐</li>
                <li style={{ display: flag == '' ? 'block' : 'none' }}
                    onClick={() => {
                        setflag('asc')
                    }}>销量</li>
                <li style={{ display: flag == 'asc' ? 'block' : 'none' }}
                    onClick={() => {
                        setflag('desc')
                    }}>销量（升序）</li>
                <li style={{ display: flag == 'desc' ? 'block' : 'none' }}
                    onClick={() => {
                        setflag('asc')
                    }}>销量（降序）</li>
                <li style={{ display: flag1 == '' ? 'block' : 'none' }}
                    onClick={() => {
                        setflag1('asc')
                    }}>价格</li>
                <li style={{ display: flag1 == 'asc' ? 'block' : 'none' }}
                    onClick={() => {
                        setflag1('desc')
                    }}>价格（升序）</li>
                <li style={{ display: flag1 == 'desc' ? 'block' : 'none' }}
                    onClick={() => {
                        setflag1('asc')
                    }}>价格（降序）</li>
            </ul>
            <ul>
                {newList1.map(item => {
                    return <div key={item._id} style={{
                        display: 'flex',
                        padding:'5px 10px',
                        boxSizing:'border-box'
                    }}>
                        <img src={'/img/' + item.imgsrc} alt="" style={{ width: '100px' }} 
                        onClick={()=>{
                            navigate('/demo',{state:{item}})
                        }}/>
                        <div style={{marginLeft:'10px'}}>
                            <div style={{
                                whiteSpace: 'nowrap', overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                width: '200px'
                            }}>{item.name}</div>
                            <div style={{
                                fontWeight: '700',
                                color:'red',
                                marginTop:'50px'
                            }}>￥{item.price}</div>
                        </div>
                    </div>
                })}
            </ul>
        </div>
    )
}
